<!--营业概况-->
<template>
  <div>
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane :label="lang._048" name="first" class="tab1">
        <el-tree class="data-tree" :data="data5" node-key="id" default-expand-all :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button class="first-btn btn" type="primary" size="mini" @click="() => append(data)" round>
                {{lang._077}}
              </el-button>
              <el-button class="btn" type="primary" size="mini" @click="() => append(data)" round>
                {{lang._078}}
              </el-button>
              <el-button class="btn" type="primary" size="mini" @click="() => remove(node, data)" round>
                {{lang._079}}
              </el-button>
              <el-button class="btn" type="primary" size="mini" @click="() => append(data)" round>
                {{lang._080}}
              </el-button>
            </span>
          </span>
        </el-tree>
      </el-tab-pane>
      <!-- 商品分类标签页 -->
      <el-tab-pane class="tab2" :label="lang._076" name="second">
        <el-container>
          <el-main>
            <el-row>
              <el-col style="width:300px;float:left;margin-right:20px;" class="categroy-index">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                  <el-submenu index="1">
                    <template slot="title">
                      <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                      <template slot="title">分组一</template>
                      <el-menu-item index="1-1">选项1</el-menu-item>
                      <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                      <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                      <template slot="title">选项4</template>
                      <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                  </el-submenu>
                </el-menu>
              </el-col>
              <!-- 分类目录 -->
              <el-col style="float-left;width:calc(100% - 300px - 30px);overflow-x:hidden;">
                  <el-row>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                    <el-col :span='4'>
                      <div style="background:white;margin: 0 5px;border-radius:10px;">
                      <img class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521110792435&di=b222069c583068a9c2025079c3490a73&imgtype=0&src=http%3A%2F%2Fupload.365jilin.com%2F2014%2F1129%2F1417227556885.jpg" alt="">
                      <p class="goods-name">贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力贫穷限制了我的想象力</p>
                      <p class="goods-price">
                        P 6600.00
                        <span>/只</span>
                      </p>
                      </div>
                    </el-col>
                  </el-row>
              </el-col>
              <!-- 详细菜单 -->
            </el-row>
          </el-main>
          <el-footer class="text-right">
            <el-button class="float-left btn" type="primary" round>编辑分类排序</el-button>
            请输入正整数,数值越小，排序越靠前
          </el-footer>
        </el-container>
      </el-tab-pane>
      <!-- 排序管理标签页 -->
    </el-tabs>
  </div>
</template>
<style lang="less" scoped>
  .tab1 {
    .data-tree {
      color: #409EFF;
      margin: 20px;
      .first-btn {
        margin-left: 350px;
      }
      .btn {
        display: none;
      }

    }
  }

  .tab2 {

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      // line-height: 160px;
      overflow-y: scroll;
      height:calc(100vh - 80px - 121px);
    }
    .el-header,
    .el-footer {
      background-color: #FFF;
      color: #333;
      text-align: center;
      line-height: 60px;
      height: 60px;
      position: fixed;
      bottom: 0;
      width: calc(100% - 200px);
    }
    .el-row{
      overflow: hidden;
    }
    .el-col .el-col{

      border-radius: 14px;
      margin-top: 20px;
      
      .goods-img{
        width: 100%;
        height: 157px;
      }
      .goods-name{
        margin: 0 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 18px;
        color: #545e66;
        font-size: 15px;
        font-weight: bold;
        margin-top: 6px;
        margin-bottom: 15px;
      }
      .goods-price{
        color: #409EFF;
        font-size: 16px;
        line-height: 20px;
        text-align: left;
        margin: 0 10px;
        // margin-bottom: 20px;
        padding-bottom: 20px;
        span{
          float: right;
        }
      }
    }
  }

  .el-footer{
    text-align: right !important;
    font-size: 18px;
    font-weight: bold;
    color: #323644;
    .btn{
      margin-top: 10px;
    }
  }
</style>
<style>
  .el-tabs__header {
    height: 60px;
    margin: 0;
    background: #FFF;
  }

  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    margin-top: 15px;
    border: none;
    color: #409eff;
    font-size: 15px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-bottom: none;
    border-left: none;
    margin-left: 20px;
    margin-right: 20px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    color: #FFF;
    background: #409eff;
    border-radius: 14px;
  }

  .el-tabs__content {
    height: calc(100vh - 61px - 80px);
    background: unset;
  }

  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

  .tab1 .el-tree-node__content {
    height: 50px;
    ;
  }

  .tab1 .el-tree-node__content:hover .btn {
    display: inline;
  }

  .el-tabs__content {
    background: #F3F4F5;
  }

  .categroy-index .el-submenu__title {
    color: #409eff;
  }

  .categroy-index .el-menu-item {
    background: unset !important;
    color: #409eff;
    text-align: left;
  }

  .categroy-index .el-submenu__title i {
    color: #409eff;
  }

  .categroy-index .el-submenu__title {
    width: 100%;
    text-align: left;
  }
  .categroy-index .el-menu{
    width: 300px !important;
  }
</style>


<script>
  export default {
    props: ['lang'],
    data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
      return {
        activeName2: 'first',
        //初始的选择标签页
        data5: JSON.parse(JSON.stringify(data)),
        // 树形结构图的数据
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }

</script>
